<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/base.css">
  <link rel="stylesheet" href="iconfont/iconfont.css">
  <link rel="stylesheet" href="css/common.css">
  <link rel="stylesheet" href="css/index.css">
  <!-- 引入公共样式(import)后.必须要进行引入！ -->
  <link rel="stylesheet" href="css/oder.css">
  <!-- 引入OderCSS -->

</head>

<body>




  <!-- 引入head    --s -->
  <!-- head  ----start ---->
  <div class="head">
    <h4>我的订单</h4>
  </div>

  <div class="oder">
    <span>全部订单</span>
    <span>待评价</span>
    <span>退款</span>
  </div>


  <!-- oderinfo订单信息   ----s -->
  <div class="oderinfo">
    <div class="hd">
      <div class="pic">
        <img src="./images/user.png" alt="">
      </div>
      <div class="info">
        <h4>飘飘奶茶</h4> <em>已经完成</em>
      </div>
    </div>
    <div class="msg">
      <div class="number">
        <span>【新店优惠】波霸奶茶</span>
        <i>X 1</i>
      </div>
      <div class="number2">
        <span>【今天特价】百香果大杯奶茶</span>
        <i>X 2</i>
      </div>
      <div class="pay">
        <span>共2件商品,实付
          <i>￥999</i>
        </span>
        <a href="#">再来一单</a>
      </div>
    </div>
</div>


    <!--oderinfo 2 -->
<div class="oderinfo">
  <div class="hd">
    <div class="pic">
      <img src="./images/user.png" alt="">
    </div>
    <div class="info">
      <h4>飘飘奶茶</h4> <em>已经完成</em>
    </div>
  </div>
  <div class="msg">
    <div class="number">
      <span>【新店优惠】波霸奶茶</span>
      <i>X 1</i>
    </div>
    <div class="number2">
      <span>【今天特价】百香果大杯奶茶</span>
      <i>X 2</i>
    </div>
    <div class="pay">
      <span>共2件商品,实付
        <i>￥999</i>
      </span>
      <a href="#">再来一单</a>
    </div>
  </div>
</div>


<!-- oderinfo3 -->
<div class="oderinfo">
  <div class="hd">
    <div class="pic">
      <img src="./images/user.png" alt="">
    </div>
    <div class="info">
      <h4>飘飘奶茶</h4> <em>已经完成</em>
    </div>
  </div>
  <div class="msg">
    <div class="number">
      <span>【新店优惠】波霸奶茶</span>
      <i>X 1</i>
    </div>
    <div class="number2">
      <span>【今天特价】百香果大杯奶茶</span>
      <i>X 2</i>
    </div>
    <div class="pay">
      <span>共2件商品,实付
        <i>￥999</i>
      </span>
      <a href="#">再来一单</a>
    </div>
  </div>
</div>


    <!-- footer   ---start -->
    <div class="footer">
      <div >
         <span class="iconfont icon-home"></span>
          <p >首页</p>
      </div>

      <div>
          <span class="iconfont icon-category
          "></span>
          <p>分类</p>
      </div>
    <div class="red">
      <span class="iconfont  icon-orders
      "></span>
      <p>订单</p></div>
    <div>
        <span class="iconfont icon-my"></span>
        <p>我的</p>
    </div>
  </div>










</body>

</html>